<template>
  <a-carousel
    v-if="unprocessedMessages.length > 0"
    class="marquee"
    autoplay
    :dots="false"
    :autoplay-speed="3000"
    :effect="'scrollx'"
    :dot-position="'bottom'"
  >
    <div
      v-for="(message, index) in unprocessedMessages.slice(0, 3)"
      :key="index"
      class="marquee-item"
    >
      {{ message.content }}
    </div>
  </a-carousel>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { page } from '@/services';

const unprocessedMessages = ref([]);

const fetchUnprocessedMessages = async () => {
  const response = await page('/api/auth/tUserMsg', {
    current: 1,
    pageSize: 3,
    data: { status: 0 },
  });
  unprocessedMessages.value = response.page?.list||[];
};

onMounted(async () => {
  await fetchUnprocessedMessages();
  setInterval(fetchUnprocessedMessages, 60000);
});
</script>

<style scoped>
.marquee {
  width: 100vw;
  height: 40px;
  margin: 8px;
}

.marquee-item {
  padding: 10px;
  text-align: left;
}
</style>
